import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, Checkbox, Form, Input, Flex } from 'antd';
import { register } from '../../api/axios.js';
import sendVerificationCode from '../../components/sendVerificationCodeApi'

type FieldType = {
  userName?: string;
  password?: string;
  account?: string;
  remember?: string;
  email?: string;
  repassword?: string
  securityCode?: number
};

const Register: React.FC = () => {
  const [userName, setUserName] = useState('');
  const [account, setAccount] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');
  const [securityCode, setSecurityCode] = useState('')
  const navigate = useNavigate();
  const handleClick = () => {
    navigate('/login');

  }

  const handleSendCode = () => {
    sendVerificationCode({ email, account });
  };


  const handleSubmit = async (e: any) => {

    try {
      const response = await register({ account, userName, password, email, securityCode });
      // 注册成功处理
      console.log('注册成功', response);
      // 跳转到登录页面
      window.location.href = '/login';
    } catch (err: any) {

      console.log('注册失败', err)
    }
  };
  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', backgroundImage: 'url("/images/login1.jpg")', }}>
      <div
        style={{
          backgroundColor: 'rgba(255, 255, 255, 0.8)', 
          borderRadius: '30px', // 设置圆角
          padding: '20px',
          boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)', 
        }}
      >

        <Form name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          autoComplete="off"

        >
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <h1 style={{ fontSize: '1', fontWeight: 'bold' }}>注册</h1>
          </Form.Item>
          <Form.Item<FieldType>
            label="Account"
            name="account"
            rules={[{ required: true, message: 'Please input your Account!' },
            { min: 4, max: 20, message: "账号格式错误6-20数字" },
            ]}

          >
            <Input value="account" onChange={(e) => setAccount(e.target.value)} />
          </Form.Item>

          <Form.Item<FieldType>
            label="Username"
            name="userName"
            rules={[{ required: true, message: 'Please input your username!' },
            { min: 4, max: 16, message: "用户名位6-20位数字或字母" },
            { pattern: new RegExp("^[a-zA-Z0-9_]+$"), message: " " }
            ]}
          >
            <Input value="userName" onChange={(e) => setUserName(e.target.value)} />
          </Form.Item>


          <Form.Item<FieldType>
            label="Password"
            name="password"
            rules={[{ required: true, message: 'Please input your password!' },
            { min: 8, max: 16, message: "密码8-16位,且包含大小写字母、数字、特殊字符" },
            { pattern: new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})"), message: '' }]}

          >
            <Input.Password value="password" onChange={(e) => setPassword(e.target.value)} />
          </Form.Item>

          <Form.Item<FieldType>
            label="Email"
            name="email"
            rules={[{ required: true, message: 'Please input your email!' },
            { pattern: new RegExp("[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"), message: "邮箱格式错误" }
            ]}>
            <Input value="email" onChange={(e) => setEmail(e.target.value)} />


          </Form.Item>
          <Form.Item<FieldType>
            label="SecurityCode"
            name="securityCode"
            rules={[{ required: true, message: 'Please input your securityCode!' },
            { len: 6, message: "验证码6位" },]}
          >
            <Input value="securityCode" onChange={(e) => setSecurityCode(e.target.value)} />

          </Form.Item>


          <Form.Item<FieldType>
            name="remember"
            valuePropName="checked"
            wrapperCol={{ offset: 8, span: 16 }}
          ><Button type="primary" onClick={handleSendCode}>发送验证码</Button>
            <Checkbox>Remember me</Checkbox>
          </Form.Item>



          <Flex style={{ display: 'flex', justifyContent: 'space-around' }}>
            <div>
              <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Button onClick={handleClick} type="primary" htmlType="submit">
                  去登录
                </Button>

              </Form.Item>
            </div>
            <div>
              <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Button onClick={handleSubmit} type="primary" htmlType="submit">
                  注册
                </Button>
              </Form.Item>
            </div>
          </Flex>
        </Form>
      </div>


    </div>
  );

};


export default Register;


